<!--  -->
<template>
      <div id="sidebar">
        <el-aside width="210px">
          <sidebar-header/>
          <sidebar-body/>
          <sidebar-footer/>
        </el-aside>
      </div>
</template>

<script>
import Header from "./sidebar/Header";
import Footer from "./sidebar/Footer";
import Body from "./sidebar/Body";

export default {
  name: "sidebar",
  components: {
    "sidebar-footer": Footer,
    'sidebar-header': Header,
    "sidebar-body" : Body,
  }
}
</script>
<style lang="less" scoped>
@import '../styles/color.less';


aside {
  height: 100%;
}

#sidebar {
  background: @sidebar-background;
  text-align: center;
}
</style>
